<template>
   <div>
     <h2>{{msg}}</h2>
     <div id="content">
         <input v-model="inputMsg" type="text"/> <span>{{homeAMsg}}</span>
     </div>
     <div id="divFloat">
        <home-a :inputMsg="inputMsg" @fromHomeAMsg="fromHomeAMsg"></home-a>
        <home-b :inputMsg="inputMsg"></home-b>
     </div>
   </div>
</template>
<script>
  import homeA from './homeComponent/homeA.vue'
  import homeB from './homeComponent/homeB.vue'

  export default {
     data(){
         return {
             msg:"我是组件home",
             inputMsg:"",
             homeAMsg:""
         }
     },
     methods:{
       fromHomeAMsg(homeAMsg){
           this.homeAMsg = homeAMsg;
       }
     },
     components:{
        homeA,
        homeB
     }
  }
</script>
<style lang="scss">
  #content{
    height: 50px;
    border-bottom: solid 0.5px grey;
  }

  #divFloat div{
    float: left;
  }
</style>
